<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>文章列表</title>
    <!-- css样式文件 -->
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/iconfont.css">
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="js/jedate/css/jedate.css">
    <!-- js样式文件 -->
    <script src="js/jquery-1.12.4.min.js"></script>
    <script src="js/jedate/js/jedate.js"></script>

    <!-- tinymce 富文本编辑器 -->
    <script src="./js/tinymce/tinymce.min.js"></script>
    <script src="./js/tinymce_setup.js"></script>
    <!-- 显示当前日期 -->
    <script src="js/moment.min.js"></script>
</head>

<body>
    <div class="container-fluid">
        <div class="common_title">
            写文章
        </div>
        <div class="container-fluid common_con">
            <form id="f1" class="form-horizontal article_form">
                <div class="form-group">
                    <label for="inputEmail3" class="col-sm-2 control-label">文章标题：</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" id="txtTitle" name="title" placeholder="文章标题">
                    </div>
                </div>
                <div class="form-group">
                    <label for="inputPassword3" class="col-sm-2 control-label">文章封面：</label>
                    <div class="col-sm-10">
                        <img id="imgPrev" src="./images/2.jpg" style="height: 188px;" />
                        <input type="file" id="upFile" name="cover">
                    </div>
                </div>
                <div class="form-group">
                    <label for="inputEmail3" class="col-sm-2 control-label">文章类别：</label>
                    <div class="col-sm-4">
                        <!-- 文章分类下拉框  -->
                        <select id="selCate" name="categoryId" class="form-control"></select>
                    </div>
                </div>
                <div class="form-group">
                    <label for="inputEmail3" class="col-sm-2 control-label">发布时间：</label>
                    <div class="col-sm-4">

                        <div class="input-group">
                            <input type="text" class="form-control" name="date" placeholder="YYYY-MM-DD" id="dateinput">
                            <span class="input-group-btn">
                                <button class="btn btn-default" type="button"
                                    onclick="jeDate('#dateinput',{trigger:false,format: 'YYYY-MM-DD'})"><i
                                        class="iconfont icon-icondate"></i></button>
                            </span>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <label for="inputEmail3" class="col-sm-2 control-label">文章内容：</label>
                    <div class="col-sm-10">
                        <textarea class="form-control" id="rich_content"></textarea>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                        <input id='btnPublish' type="button" value="发布" class="btn btn-success">
                        <input id='btnSave' type="button" value="存为草稿" class="btn btn-default">
                    </div>
                </div>
            </form>
        </div>
    </div>
</body>

<script>

    $(function () {
        //1.修改预览图片
        $("#upFile").change(function () {
            //a.获取 文件选择框的 文件内容
            var fileInfo = this.files[0];
            //b.使用js 创建 选中文件的 虚拟路径
            var virPath = URL.createObjectURL(fileInfo);
            //c. 设置虚拟路径 给  预览图片
            $('#imgPrev').attr('src', virPath);
        });

        //2.加载 分类 下拉框数据
        loadCateList()

        //3.利用 moments.js 插件 获取 当前日期，存入 日期文本框
        var m1 = moment().format('YYYY-MM-DD');
        $('#dateinput').val(m1);

    })

    // 1.加载 分类 下拉框数据
    function loadCateList() {
        //a. 异步请求 分类数据
        $.ajax({
            url: 'http://localhost:8080/admin/category/list',
            method: 'get',
            success: function (backData) {
                if (backData.code == 200) {
                    //遍历数组，生成下拉框选项
                    // 文档片段 对象
                    var fragObj = document.createDocumentFragment();

                    for (var i = 0; i < backData.data.length; i++) {
                        //a.取出 分类对象
                        var v = backData.data[i];
                        //b.生成 option
                        var opt = document.createElement('option');
                        opt.value = v.id;
                        opt.innerText = v.name;
                        //c. option 添加 到 frag中
                        fragObj.appendChild(opt);
                    }
                    // d.将 fragment 中的 option 一次性添加到 下拉框中
                    document.getElementById('selCate').appendChild(fragObj);
                }
            }
        });
    }

    // 2.点击 发布 和 存为草稿 按钮 执行 提交操作
    $('#btnPublish').click(function () {
        var fd = new FormData($('#f1')[0]);

        //a.新增 按钮，所以 发布状态 为 “已发布”
        fd.append('state', '已发布');
        //b.需要 把 富文本编辑器中的 文章内容 获取
        var contentStr = tinyMCE.activeEditor.getContent();

        fd.append('content', contentStr);

        $.ajax({
            url: 'http://localhost:8080/admin/article/publish',
            method: 'post',
            data: fd,
            contentType: false,
            processData: false,
            success: function (backData) {
                if (backData.code == 200) {
                    alert('文章新增成功');
                    window.location = './article_list.html';
                }
            }
        });
    });

    $('#btnSave').click(function () {
        var fd = new FormData($('#f1')[0]);
        //a.存为草稿 按钮，所以 发布状态 为 草稿
        fd.append('state', '草稿');
        //b.需要 把 富文本编辑器中的 文章内容 获取
        var contentStr = tinyMCE.activeEditor.getContent();
        fd.append('content', contentStr);

        $.ajax({
            url: 'http://localhost:8080/admin/article/publish',
            method: 'post',
            data: fd,
            contentType: false,
            processData: false,
            success: function (backData) {
                if (backData.code == 200) {
                    alert('保存为草稿成功');
                    window.location = './article_list.html';
                }
            }
        });
    });
</script>


    


</html>